const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
/* 
  esLint配置过程:
    1. 下载eslint
    2. 在项目根目录创建.eslintrc.json文件,并进行配置
    3. 下载 eslint-webpack-plugin 插件
    4. 引入并使用这个插件
*/
module.exports = {
  // 有两种方法:一种是前面加逗号,然后要加点(__dirname, "./src/index.js")  另外一种是直接加一个+号(__dirname+ "/src/index.js")
  entry: path.resolve(__dirname,"../src/index.js"),
//  出口配置
  output: {
  //把路径改为绝对路径
    path: path.resolve(__dirname,"../build"),
    filename: "./js/bundle.js"
  },
  // loader配置
  module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ["style-loader", "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/i,
       /* 
        less-loader:识别less文件类型
        css-loader:为了识别css类型文件进行打包
        style-loader:js把样式放在style标签中,并插入到页面中
        use后如果是一个数组,则是从后向前一致加载
      */
        // use: ["style-loader", "css-loader","less-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },{
        test: /\.(png|jpg|gif|webp|jpeg)$/,
        //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 30 * 1024, // 小于30kb以下的图片会被打包成base64格式
          },
        },
        generator: {
          filename: 'images/[name][ext]'
        }
      },
    //  把html-loader忽略就行了
      // {
      //   test:/\.html$/i,
      //   use: {
      //     loader: 'html-loader'
      //   }
      // }
     ],
  }, 
  
//优化的配置
optimization: {
  minimizer: [
    new CssMinimizerPlugin(),
  ],
},


  //插件的配置
  plugins: [new MiniCssExtractPlugin({
    filename: "./css/main.css"
  }),new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "../public/index.html"),
    filename: "index.html",
    minify: {
      collapseWhitespace: true,
      keepClosingSlash: true,
      removeComments: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      useShortDoctype: true
  }
  }),new ESLintPlugin({
    fix:true
  }),new CopyWebpackPlugin({
    //patterns模式 
    patterns: [{
      from: path.resolve(__dirname, "../public"),
      to: "public",
      //配置复制时忽略的文件
      globOptions: {
      //  ignore: ["**/index.html"]是忽略
        ignore: ["**/index.html"]
      }
    }],
  })],
//模式 production是生产环节
  mode: "production"
}